<template>
  <div class="zhubo">
    <top-open></top-open>
    <div class="wrap">
      <div class="info">
        <div class="img">
          <img v-lazy="userInfo.logo" alt="" />
          <span class="icon">v{{ userInfo.anchorGrade }}</span>
        </div>
        <div class="txt">
          <div class="nickname">{{ userInfo.nickname }}</div>
          <div class="js">简介：{{ userInfo.des || "暂无" }}</div>
          <div class="ren" v-if="userInfo.ptitle">
            喜马认证 : {{ userInfo.ptitle }}
          </div>
        </div>
      </div>
      <div class="count">
        <div class="gz">
          <span class="text">关注</span>
          <span class="num">{{ statCountInfo.followingCount }}</span>
        </div>
        <div class="line"></div>
        <div class="fen">
          <span class="text">粉丝</span>
          <span class="num">{{ statCountInfo.followerCount | getCount }}</span>
        </div>
      </div>
      <div class="add_gx">
        <a class="gz_bar"> + 关注 </a>
      </div>
    </div>
    <!-- isFloat == true ? 'float' : '' -->
    <div :class="['box']" ref="box">
      <div class="com" ref="com">
        <a
          @click="tabList(0)"
          :class="['item', index == 0 ? 'active' : '']"
          ref="w"
          ><span>主页</span></a
        >
        <a
          @click="tabList(1, 'ZbAlbum')"
          :class="['item', index == 1 ? 'active' : '']"
          ><span>专辑</span></a
        >
        <a
          @click="tabList(2, 'ZbSound')"
          :class="['item', index == 2 ? 'active' : '']"
          ><span>声音</span></a
        >
        <a
          @click="tabList(3, 'ZbAlbum')"
          :class="['item', index == 3 ? 'active' : '']"
          ><span>订阅</span></a
        >
      </div>

      <div
        class="line"
        :style="`transform:translateX(${distance}px); transition:all .2s ease;`"
      >
        <div class="bar"></div>
      </div>
    </div>

    <div class="swiper_box">
      <swiper class="swiper" :options="swiperOption" ref="swiperWrap">
        <swiper-slide>
          <div class="main">
            <div class="msg">
              <div class="title">TA的信息</div>
              <!-- <div class="xz">金牛座</div> -->
              <div class="tjs">简介：{{ userInfo.des }}</div>
              <div class="ting">听力等级：{{ userInfo.userGrade }}</div>
              <div class="tag">
                <div class="tt_tag" v-if="tag.length">兴趣：</div>
                <div class="ttc" v-if="tag.length">
                  <span
                    v-for="(item, i) in tag"
                    :key="i"
                    @click="goSearch(item)"
                    >{{ item }}</span
                  >
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <zb-album v-if="flagArr[1]"></zb-album>
        </swiper-slide>
        <swiper-slide>
          <zb-sound v-if="flagArr[2]" @play-pause="play"></zb-sound>
        </swiper-slide>
        <swiper-slide>
          <zb-album v-if="flagArr[3]"></zb-album>
        </swiper-slide>
      </swiper>
    </div>
    <page-play :playPath="playPath" :isPlay="isPlay"></page-play>
    <float-open></float-open>

    <my-load v-if="isShow"></my-load>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import ZbAlbum from "@/views/zhubo/zhubocomp/ZbAlbum.vue";
import ZbBook from "@/views/zhubo/zhubocomp/ZbBook.vue";
import ZbSound from "@/views/zhubo/zhubocomp/ZbSound.vue";

import { initZbDetailData } from "@/request/api.js";

import { initZbSoundListlData } from "@/request/api.js";

export default {
  name: "Zhubo",
  data() {
    return {
      anchorid: 0,
      distance: 0,
      index: 0,
      userInfo: {},
      statCountInfo: {},
      tag: [],

      pageSize: 20,
      page: 1,
      tabType: 2,

      playPath: "",
      isPlay: "",

      compName: "",
      isFloat: false,
      isShow: false,

      flagArr: [0],
      swiperOption: {
        // 事件
        on: {
          slideChangeTransitionStart: () => {
            if (this.flagArr.length < 4) {
              this.flagArr.push(this.swiper.activeIndex);
            }
            this.distance = this.swiper.activeIndex * this.$refs.w.offsetWidth;
            this.index = this.swiper.activeIndex;
          },

          setTranslate:()=> {
            console.log(this.swiper.translate)
            // let dis = this.swiper.touches.diff
            
              // this.distance = this.swiper.translate
            
            // this.distance =  Math.abs(this.swiper.translate * this.$refs.w.offsetWidth  / window.innerWidth)
            // console.log(a)
            //  distance                          dis
            //  this.$refs.w.offsetWidth          window.innerWidth
          },
        },
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.swiperWrap.swiper;
    },
    translate(){
      return this.$refs.swiperWrap.swiper.translate
    }
  },
  components: {
    ZbAlbum,
    ZbBook,
    ZbSound,
    swiper,
    swiperSlide,
  },
  created() {
    this.anchorid = this.$route.params.id - 0;
    this.initData();
  },
  methods: {
    play(obj) {
      this.isPlay = obj.isPlay;
      this.playPath = obj.playPath;
    },
    tabList(i) {
      this.index = i;
      this.distance = this.$refs.w.offsetWidth * this.index;
      this.swiper.activeIndex = i;
      this.flagArr[i] = i;
    },
    initData() {
      let flag = localStorage.getItem("flag");
      if (flag) {
        this.isShow = flag;
      }
      initZbDetailData(this.anchorid, this.pageSize, this.tabType)
        .then((res) => {
          console.log("详情==>", res.data);
          let { data } = res.data;
          let obj = {
            // 昵称
            nickname: data.anchorInfo.userInfo.nickname,
            des: data.anchorInfo.userInfo.personalSignature,
            logo: "https://imagev2.xmcdn.com/" + data.anchorInfo.userInfo.logo,
            anchorGrade: data.anchorInfo.userInfo.anchorGrade,
            ptitle: data.anchorInfo.userInfo.ptitle,
            userGrade: data.profile.userGrade,
          };
          this.statCountInfo = data.anchorInfo.statCountInfo;
          this.tag = data.profile.interests;
          this.userInfo = obj;
          if (this.userInfo) {
            this.isShow = false;
            localStorage.setItem("flag", this.isShow);
          }

          document.title = obj.nickname + "的全部作品_喜马拉雅";
        })
        .catch((err) => {
          console.log("数据失败");
        });
    },

    goSearch(item) {
      this.$router.push("/search/detail/" + item);
    },
  },
  mounted() {
    document.addEventListener("scroll", () => {
      // let top = this.$refs.box.offsetTop;
      // console.log(top)
      if (window.pageYOffset >= 264) {
        this.isFloat = true;
      } else {
        this.isFloat = false;
        // this.$refs.box.style.position = "static"
      }
    });
  },
  destroyed() {
    document.removeEventListener("scroll", document, false);
  },
};
</script>

<style lang="scss" scoped>
.zhubo {
  .wrap {
    padding: 0 15px;
    .info {
      margin-top: 25px;
      display: flex;
      .img {
        width: 85px;
        height: 85px;
        border-radius: 50%;
        background: url(../../assets/icon/common/img_load.png) no-repeat;
        background-size: 100% 100%;
        position: relative;
        > img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
        .icon {
          padding: 3px 7px;
          display: inline-block;
          font-size: 13px;
          color: #fff;
          position: absolute;
          bottom: 0;
          right: 0;
          background-color: #f86442;
          border-radius: 9.5px;
        }
      }

      .txt {
        flex: 1;
        height: 85px;
        padding-left: 17px;
        .nickname,
        .ren {
          width: 240px;
        }
        .nickname,
        .js,
        .ren {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .js {
          display: inline-block;
          // min-width:100px;
        }
        .nickname {
          font-size: 18px;
          color: #40404c;
        }
        .ren {
          font-size: 12px;
          color: #858585;
          line-height: 25px;
        }
        .js {
          max-width: 240px;
          height: 26px;
          line-height: 26px;
          color: #858585;
          background: rgba(0, 0, 0, 0.07);
          padding: 0 5px;
          font-size: 12px;
          margin-top: 8px;
        }
      }
    }

    .count {
      margin: 23px 0 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      > div {
        line-height: 19px;
        span {
          vertical-align: center;
        }
        .text {
          font-size: 13px;
          color: #858585;
          padding-right: 30px;
        }
        .num {
          font-size: 13px;
          color: #323232;
          font-weight: 500;
        }
      }
      .line {
        width: 1px;
        height: 19px;
        background-color: #a3a3a3;
        margin: 0 18px;
      }
    }
    .add_gx {
      text-align: center;
      a {
        display: inline-block;
        width: 103px;
        height: 30px;
        background-color: #f86442;
        color: #fff;
        font-size: 15px;
        border-radius: 15px;
        line-height: 30px;
      }
    }
  }

  .box {
    width: 100%;
    position: relative;
    .line {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 25%;
      height: 2px;
      .bar {
        margin: 0 auto;
        width: 70%;
        height: 2px;
        border-radius: 1px;
        background-color: #f06742;
      }
    }
    .com {
      width: 100%;
      background-color: #fff;
      height: 43px;
      border-bottom: 1px solid #f6f6ff;
      display: flex;

      .item {
        display: block;
        flex: 1;
        text-align: center;
        line-height: 42px;
        transition: all 0.3s;
        span {
          vertical-align: top;
          font-size: 14px;
          color: #a3a3ac;
        }
      }
      .item.active span {
        color: #40404c;
        font-size: 18px;
      }
    }
  }

  .main {
    background-color: #fff;
    .msg {
      padding: 25px 15px 0;
      div {
        margin-bottom: 12px;
      }
      .title {
        color: #111111;
        font-size: 18px;
      }
      .xz {
        font-size: 13px;
        color: #666;
      }
      .tjs {
        width: 300px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 14px;
        color: #999;
      }
      .ting {
        color: #999;
        font-size: 14px;
      }
      .tag {
        display: flex;

        .tt_tag {
          width: 45px;
          color: #999;
          font-size: 14px;
        }
        .ttc {
          flex: 1;
          span {
            display: inline-block;
            padding: 2px 3px;
            background-color: #f3f4f5;
            color: #666;
            margin-left: 7px;
            font-size: 14px;
          }
        }
      }
    }

    .album,
    .shengyin,
    .book {
      padding-left: 15px;
      li {
        border-bottom: 1px solid #f3f4f5;
        a {
          display: block;
        }
      }
    }
  }

  .box.float {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
  }
}
.swiper_box {
  /deep/.swiper-container {
    .swiper-slide::-webkit-scrollbar {
      display: none;
    }
    .swiper-slide {
      height: 360px;
      overflow-y: auto;
    }
  }
}
</style>

